<template>
  <div class="filter-item-area flx-row-s-s">
    <div class="title">{{ name }}:</div>
    <div class="right-area flx-row-s-s">
      <template v-if="button">
        <div class="filter-item filter-first-item mg-t-8" :class="{'filter-first-item-active': select.length == 0}" @click="limitless">不限</div>
        <div class="flx-row-s-s inner-area">
          <div class="filter-item mg-t-8 mg-l-10"
            :class="[item.active ? 'filter-item-active' : 'filter-item-hover']"
            v-for="(item, index) in filterList" :key="index"
            @click="activeItem(index)"
          >{{item.name}}</div>
        </div>
      </template>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'VipFilteritem',
  props: {
    name: {
      default: ''
    },
    list: {
      default: () => []
    },
    button: {
      default: true
    },
    oneSelect: {
      default: false
    },
    reset: {
      default: false
    }
  },
  watch: {
    list: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if(!newValue || newValue.length <= 0) return
        this.filterList = newValue.map(item => {
          return {
            ...item,
            active: false
          }
        })
        this.select = []
      }
    },
    reset: {
      handler(newValue) {
        this.limitless()
      }
    }
  },
  data() {
    return {
      filterList: [],
      select: [],
    };
  },
  mounted() {
    
  },
  methods: {
    activeItem(index) {
      if(this.oneSelect) {
        this.filterList[index].active = true
        for(let i in this.filterList) {
          if(i != index) {
            this.filterList[i].active = false
          }
        }
        this.select = [this.filterList[index]]
      } else {
        this.filterList[index].active = !this.filterList[index].active
        this.select = this.filterList.filter(item => {
          return item.active == true;
        })
      }
      this.$emit('select-change', this.select)
    },
    limitless() {
      if(this.select.length == 0) return;
      this.select = []
      for(let i in this.filterList) {
        if(this.filterList[i].active) this.filterList[i].active = false;
      }
      this.$emit('select-change', this.select)
    }
  },
};
</script>

<style lang="scss" scoped>
.filter-item-area {
  width: 100%;
  border-bottom: #F1F1F1 dashed 1px;
  
  .title {
    width: 90px;
    color: #3D3D3D;
    font-size: 14px;
    line-height: 47px;
    flex-shrink: 0;
    text-align: right;
    margin-right: 9px;
  }

  .right-area {
    padding-bottom: 9px;

    .filter-first-item {
      border: 1px solid transparent;
      &:hover {
        color: #FF5100;
        border-color: #FF5100;
      }
    }
    .filter-first-item-active {
      color: #FF5100 !important;
      border-color: #FF5100;
      @include bg-setting('filter-active', 14px 13px, 103% 103%);
    }
    .filter-item {
      min-width: 58px;
      height: 30px;
      @include btn-s(0 9px, 30px, 4px);
      font-size: 14px;
      color: #3D3D3D;
      flex-shrink: 0;
      transition: border-color .3s, color .3s, background-image .3s;
    }
    .filter-item-hover {
      &:hover {
        color: #FF5100;
      }
    }
    .filter-item-active {
      color: #fff;
      background-color: #F9521F;
    }
    .mg-t-8 {
      margin-top: 8px;
    }
    .mg-l-10 {
      margin-left: 10px;
    }
    .inner-area {
      flex-wrap: wrap;
      width: 100%;
      margin-left: 24px;
    }
  }
}
</style>